<template>
  <div>
    <div class="upload">
      <div
        v-for="(item, index) in path_list"
        :key="index"
        class="img_mode"
        :style="'height:' + height + ';width:' + width"
        @mouseenter.stop="over(index)"
        @mouseleave="out"
      >
        <img :src="$uploadURL(item.path)" />
        <transition name="el-fade-in-linear">
          <div v-show="curIndex == index" class="transition-box">
            <div class="mask">
              <i class="el-icon-delete" @click="remove(index)" />
              <i
                v-if="bigBox"
                class="el-icon-zoom-in"
                @click="enlarge(index)"
              />
            </div>
          </div>
        </transition>
      </div>
      <div
        v-if="isLimit"
        v-loading="load"
        class="select_mode"
        :style="'height:' + height + ';width:' + width"
      >
        <input
          ref="file"
          type="file"
          :multiple="isMultiple"
          @change="change($event)"
        />
        <img
          :src="selectImgPath || selectImg"
          :style="{ width: selectImgWidth || '50%' }"
        />
      </div>
    </div>
    <el-dialog :visible.sync="isShow" center>
      <div class="big_img_mode">
        <img :src="$uploadURL(bigImg)" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 这里是图片上传时候的图标，可以自行替换
import selectImg from "@/assets/images/selectedImg.png";
import { fileImageApi } from "@/api/oss";
import { getToken } from "@/utils/auth";
export default {
  name: "Upload",
  props: {
    type: Number,
    height: String,
    width: String, // 组件预览图片大小
    selectImgPath: String, // 未选择图片时显示的图片
    selectImgWidth: String,
    bigBox: Boolean, // 是否显示图片放大按钮
    /* 多图上传 */
    isMultiple: Boolean, // 是否可多选图片
    limit_size: Number, // 限制上传数量
    quality: Number, // 图片压缩率
    limit: Number, // 图片超过 (limit * 1024)kb 将进行压缩
    isCompress: Boolean, // 是否开启图片压缩
    /* 单图上传 */
    isChangeUpload: Boolean, // 是否选择文件后触发上传
    action: "", // 单图上传路径,
    param: String, // 上传的参数名
    guId: String, // 上传的参数名
    data: Object, // 单图上传附带的参数
    success: Function, // 单图上传成功后的回调函数
    initialPortrait: Object, //初始图片
    newImg: String, // 单图上传初始图片
  },
  data() {
    return {
      selectImg,
      path_list: [],
      curIndex: -1,
      bigImg: "",
      isShow: false,
      isLimit: true,
      load: false,
      pathString: "",
    };
  },
  watch: {
    newImg(news, old) {
      // 初始图片
      if (news) {
        let pathArray = news.split(",");
        this.path_list = pathArray.map((path) => ({ path }));
        this.pathString = news;
      }
    },
    path_list() {
      if (this.path_list.length >= this.limit_size) {
        this.isLimit = false;
      } else {
        this.isLimit = true;
      }
      this.load = false;
      this.curIndex = -1;
    },
  },
  methods: {
    // 鼠标移入
    over(index) {
      this.curIndex = index;
    },
    // 鼠标移出
    out() {
      this.curIndex = -1;
    },

    // 选择图片
    change() {
      this.load = true;
      var That = this;
      const fileList = this.$refs.file.files;
      if (!fileList.length) {
        this.load = false;
        return;
      }

      for (var i = 0; i < fileList.length; i++) {
        var file_temp = fileList[i];
        const name = file_temp.name.toLowerCase();
        if (!/\.(jpg|jpeg|image|img|png|bmp|)$/.test(name)) {
          this.$message.warning("请上传图片");
          this.clean();
        }
        const reader = new FileReader(); // html5读文件
        reader.fileName = file_temp.name;
        reader.readAsDataURL(file_temp);
        reader.onload = (data) => {
          // 读取完毕后调用接口
          // 图片压缩
          // this.canvasDataURL(
          //   data.currentTarget.result,
          //   { fileSize: data.total, quality: this.quality },
          //   (baseCode) => {
          //     if (this.isChangeUpload) {
          //       this.changeUpload(baseCode, reader.fileName)
          //     } else {
          //       this.path_list.push({
          //         path: baseCode,
          //         fileName: reader.fileName
          //       })
          //     }
          //   }
          // )
          this.changeUpload(file_temp, reader.fileName);
        };
      }
    },

    // 移除图片
    remove(index) {
      console.log("删除图片:", index);
      this.path_list.splice(index, 1);
      var li = this.pathString.split(",");
      if (index > -1) {
        // 删除数组中的元素
        li.splice(index, 1);
      }
      //删除数组中的元素
      this.pathString = li.join(",");
      console.log("删除-this.path_list***", this.path_list);
      console.log("删除-this.pathString>>>", this.pathString);

      this.$emit("change", this.pathString);
    },
    // 清空图片
    clean() {
      this.path_list = [];
    },

    // 后台添加图片
    addPathList(urls) {
      console.log(urls);
      const arr = urls.split(",");
      if (arr.length == 1) {
        const obj = { path: this.$common.getUrl() + arr[0] };
        this.path_list.splice(0, 1, obj);
      } else {
        arr.forEach((item, index) => {
          const obj2 = { path: this.$common.getUrl() + item };
          this.path_list.splice(index, 1, obj2);
        });
      }
    },
    // 后台添加图片
    addUrlPathList(urls) {
      console.log(urls);
      const arr = urls.split(";");
      console.log("数组" + arr);
      if (arr.length == 1) {
        const obj = { path: this.$common.getUrl() + arr[0] };
        this.path_list.splice(0, 1, obj);
      } else {
        arr.forEach((item, index) => {
          const obj2 = { path: this.$common.getUrl() + item };
          this.path_list.splice(index, 1, obj2);
        });
      }
    },
    // 重新图片
    clearImgs() {
      this.path_list = [];
    },

    // 放大图片
    enlarge(index) {
      this.isShow = true;
      this.bigImg = this.path_list[index].path;
    },

    // 单图上传
    changeUpload(file_temp) {
      const formData = new FormData();
      formData.append("File", file_temp);
      formData.append("Type", this.type);
      formData.append("CateId", 0);
      for (var item in this.data) {
        formData.append(item, this.data[item]);
      }
      fileImageApi(this.guId, formData)
        .then((res) => {
          this.load = false;
          this.path_list.push({
            path: res,
            fileName: res,
          });
          if (this.pathString) {
            this.pathString = this.pathString + "," + res;
          } else {
            this.pathString = res;
          }
          console.log("this.path_list>>>>", this.path_list);
          console.log("pathString***", this.pathString);
          this.$message.success("上传成功");
          console.log("change//:", this.pathString);
          this.$emit("change", this.pathString);
        })
        .catch((error) => {
          console.log("res****error", error);
          this.load = false;
        });
    },

    /**
     * @uploadPath 上传的路径
     * @path_list  base64 集合, 为空则调用 this.path_list
     * @callback 上传成功后的回调函数, 返回上传成功后的路径
     */
    upload(uploadPath, path_list, callback) {
      var formData = new FormData();
      if (!path_list) {
        this.path_list.forEach((item) => {
          formData.append(
            "files",
            this.convertBase64UrlToBlob(item.path),
            item.fileName
          );
        });
      } else {
        path_list.forEach((item) => {
          formData.append(
            "files",
            this.convertBase64UrlToBlob(item.path),
            item.fileName
          );
        });
      }
      // const headers = { headers: { 'Content-Type': 'multipart/form-data' }}
      // this.$axios
      //   .post(uploadPath, formData, headers)
      //   .then((response) => {
      //     if (response.data.message == 'succ') {
      //       // 回调函数返回上传成功后的路径
      //       callback('succ', response.data.result)
      //     } else {
      //       this.$message.error('文件上传失败')
      //       callback('error')
      //     }
      //   })
      //   .catch((error) => {
      //     if (error == 'timeout') {
      //       this.$message.error('文件上传超时')
      //     }
      //     this.$message.error('文件上传异常')
      //     console.log(error)
      //     callback('error')
      //   })
      // fileImageApi(this.param, formData).then((res) => {
      //   this.load = false
      //   this.$message.success('上传成功')
      //   console.log("res****img",res);
      // }).catch(() => {
      //   console.log("res****error-img",res);
      //   this.load = false
      // })
    },
    getName() {
      return this.path_list.fileName;
    },
    // 获取base64 集合
    getPaths() {
      const paths = [];
      if (this.path_list.length == 1) {
        return this.path_list[0].path;
      } else if (this.path_list.length == 0) {
        return "";
      } else {
        for (var i = 0; i < this.path_list.length; i++) {
          paths.push(this.path_list[i].path);
          // if(i == 0){
          // 	paths = this.path_list[i].path
          // }else{
          // 	arr.push(this.path_list[i].path)
          // }
        }
      }
      return paths;
    },

    photoCompress() {},

    // 图片压缩
    // canvasDataURL(path, obj, callback) {
    //   var suffix = path.match(/\/(\S*);/)[1]
    //   var img = new Image()
    //   img.src = path
    //   img.onload = function() {
    //     var that = this
    //     // 默认按比例压缩
    //     var w = that.width
    //     var h = that.height
    //     var scale = w / h
    //     w = obj.width || w
    //     h = obj.height || w / scale
    //     var quality = 0.7 // 默认图片质量为0.7
    //     this.limit = this.limit ? this.limit : 1 // 默认为超过1M 进行压缩
    //     // 生成canvas
    //     var canvas = document.createElement('canvas')
    //     var ctx = canvas.getContext('2d')
    //     // 创建属性节点
    //     var anw = document.createAttribute('width')
    //     anw.nodeValue = w
    //     var anh = document.createAttribute('height')
    //     anh.nodeValue = h
    //     canvas.setAttributeNode(anw)
    //     canvas.setAttributeNode(anh)
    //     ctx.drawImage(that, 0, 0, w, h)
    //     // 图像质量

    //     if (obj.quality && obj.quality <= 1 && obj.quality > 0) { quality = obj.quality }

    //     var base64 = ''
    //     if (this.isCompress) {
    //       // quality值越小，所绘制出的图像越模糊
    //       base64 =
    //           obj.fileSize > this.limit * 1024
    //             ? canvas.toDataURL('image' + suffix, quality)
    //             : canvas.toDataURL('image' + suffix)
    //     } else {
    //       base64 = canvas.toDataURL('image/' + suffix, quality)
    //     }
    //     // 回调函数返回base64的值
    //     callback(base64)
    //   }
    // },

    // base64 转 blob 对象
    convertBase64UrlToBlob(urlData) {
      // 去掉url的头，并转换为byte
      var bytes = window.atob(urlData.split(",")[1]);
      // 处理异常,将ascii码小于0的转换为大于0
      var ab = new ArrayBuffer(bytes.length);
      var ia = new Uint8Array(ab);
      for (var i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
      }
      return new Blob([ab], { type: "image/png" });
    },
  },
};
</script>

<style lang="scss" scoped="upload">
::v-deep .el-dialog {
  margin: 0 auto 50px;
}

.upload {
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  padding: 10px 4px;
  box-sizing: border-box;
}

.select_mode {
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed #cfcfcf;
  border-radius: 10px;
  position: relative;
  box-sizing: border-box;
  background-color: #f4f4f5;
}
.select_mode:hover {
  border: 1px dashed #00a2e9;
}

.select_mode img {
  width: 100%;
  position: absolute;
  z-index: 1;
  cursor: pointer;
}

.select_mode input[type="file"] {
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.img_mode {
  margin-right: 10px;
  margin-bottom: 10px;
  box-shadow: 0px 1px 5px #cccccc;
  position: relative;
  width: 118px;
  height: 118px;
  overflow: hidden;
  border-radius: 4px;
  img {
    width: 100%;
    height: auto !important;
  }
}

.mask {
  background: rgb(0, 0, 0, 0.5);
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.img_mode,
.img_mode img {
  height: 120px;
  max-width: 200px;
}

.mask i {
  font-family: element-icons !important;
  color: #ffffff;
  font-size: 25px;
  padding: 0px 5px;
  cursor: pointer;
}
.big_img_mode {
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
}
.big_img_mode img {
  width: 100%;
}
</style>
